<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title || pTitle"
    :width="width"
  >
    <div ref="formDom" id="formDom">
      <v-form-render
        :form-json="formJson"
        :form-data="keepData"
        :option-data="{}"
        ref="vForm"
      >
        <template v-for="item in slots" #[item]="{ formModel }">
          <slot :name="item" :form="formModel"></slot>
        </template>
      </v-form-render>
    </div>

    <slot></slot>

    <template #footer>
      <span class="dialog-footer" v-if="showButton">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="onSubmit"> 确 认 </el-button>
      </span>
      <span v-if="showPdf">
        <el-button type="primary" @click="getPdf"> 导出为Pdf </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, defineProps, ref, defineEmits, nextTick } from "vue";
import defaultJson from "./default.json";
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
const { proxy } = getCurrentInstance();

const vForm = ref();
const props = defineProps({
  formJson: {
    type: Object,
    default: () => defaultJson,
  },
  title: {
    type: String,
  },
  slots: {
    type: Array,
    default: () => [],
  },
  showPdf: {
    type: Boolean,
    default: false,
  },
  showButton: {
    type: Boolean,
    default: true,
  },
  width: {
    type: String,
    default: "55%",
  },
});
const pTitle = computed(() => {
  if (keepData.value.id) {
    return "修改";
  } else {
    return "新增";
  }
});
const keepData = ref({});
const dialogFormVisible = ref(false);
const open = (data, json) => {
  dialogFormVisible.value = true;
  let newdata = data || {};
  keepData.value = JSON.parse(JSON.stringify(newdata));
  nextTick().then(async () => {
    setFormData({});
    await setFormJson(json);
    setTimeout(() => {
      setFormData(newdata);
    }, 135);
  });
};
const close = () => {
  dialogFormVisible.value = false;
};
const emits = defineEmits(["onSubmit", "onChange"]);

const setFormJson = async (json) => {
  await vForm.value.setFormJson(json);
};
const setFormData = (data) => {
  vForm.value.setFormData(data);
};

const onSubmit = async () => {
  try {
    const formData = await vForm.value.getFormData();
    if (formData) {
      emits("onSubmit", { ...keepData.value, ...formData });
      close();
    } else {
      proxy.$modal.msgError("有必填项未填写");
    }
    return formData;
  } catch (error) {
    proxy.$modal.msgError("有必填项未填写");
    return false;
  }
};
const formDom = ref();
const getPdf = () => {
  // const style = "@page {margin:0 3mm};"; //打印时去掉眉页眉尾
  // const header = keepData.value.name || "作业票";

  // print({
  //   printable: "formDom", // 标签元素id
  //   type: "html",
  //   header: "",
  //   targetStyles: ["*"],
  //   style,
  // });
  // return;
  const title = keepData.value.title || "sis";
  html2Canvas(formDom.value, {
    allowTaint: true,
    useCORS: true,
  }).then((canvas) => {
    const contentWidth = canvas.width;
    const contentHeight = canvas.height;
    const pageHeight = (contentWidth / 592.28) * 841.89;
    let leftHeight = contentHeight;
    let position = 0;
    const imgWidth = 590.28;
    const imgHeight = (590.28 / contentWidth) * contentHeight;
    const pageData = canvas.toDataURL("image/jpeg", 1.0);
    console.log("pageData", pageData);
    const PDF = new JsPDF("", "pt", "a4");
    if (leftHeight < pageHeight) {
      PDF.addImage(pageData, "JPEG", 2, 20, imgWidth, imgHeight);
    } else {
      while (leftHeight > 0) {
        PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
        leftHeight -= pageHeight;
        position -= 841.89;
        if (leftHeight > 0) {
          PDF.addPage();
        }
      }
    }
    PDF.save(`${title}.pdf`);
  });
};
defineExpose({
  setFormJson,
  setFormData,
  onSubmit,
  open,
  close,
});
</script>

<style lang="scss" scoped></style>
